<template>
  <view class="container">
    <uni-echarts
      class="ec-canvas"
      id="line-chart"
      ref="canvas"
      canvas-id="line-chart"
      :ec="ec"
    ></uni-echarts>
    <button
      type="primary"
      @click="updateChart"
    >修改数据</button>
  </view>
</template>

<script>
import uniEcharts from '@/components/uni-echarts/uni-echarts';

export default {
  components: {
    uniEcharts
  },
  data() {
    return {
      ec: {
        lazyload: true,
        option: {
          title: {
            text: '测试下面legend的红色区域不应被裁剪',
            left: 'center'
          },
          color: ["#37A2DA", "#67E0E3", "#9FE6B8"],
          legend: {
            data: ['A', 'B', 'C'],
            top: 50,
            left: 'center',
            backgroundColor: 'red',
            z: 100
          },
          grid: {
            containLabel: true,
            left: 50,
            right: 150
          },
          tooltip: {
            show: true,
            trigger: 'axis'
          },
          xAxis: {
            name: '日期（每一天）',
            type: 'category',
            boundaryGap: false,
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
          },
          yAxis: {
            x: 'center',
            type: 'value',
            splitLine: {
              lineStyle: {
                type: 'dashed'
              }
            }
          },
          series: [{
            name: 'A',
            type: 'line',
            smooth: true,
            data: [18, 36, 65, 30, 78, 40, 33]
          }, {
            name: 'B',
            type: 'line',
            smooth: true,
            data: [12, 50, 51, 35, 70, 30, 20]
          }, {
            name: 'C',
            type: 'line',
            smooth: true,
            data: [10, 30, 31, 50, 40, 20, 10]
          }]
        }
      }
    };
  },
  methods: {
    updateChart() {
      const option = this.ec.option;
      option.series[0].data = [10, 9, 8, 7, 6, 5, 4];
      this.$refs['canvas'].updateOption(option);
    }
  },
  onReady() {
    this.$refs['canvas'].init();
  }
}
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
}
.ec-canvas {
  width: 750upx;
  height: 750upx;
  display: block;
}
</style>
